/**
*
*  js主文件
*
*/

// 定义画布大小 
var canvas = document.getElementById('canvas');
    context = canvas.getContext('2d');
    
   
    W = window.innerWidth;
    H = window.innerHeight;
    console.log(H);
    canvas.height = 500;
    gridY =6, gridX = 6;
    type = "ball";

   /*  var x = 20;
    var y = 200;
    context.font = "100px 微软雅黑";
    context.fillStyle = "#ffffff"; // text color
    context.fillText("左盟主", x, y);
    context.fillStyle = "red";
    context.fillRect(0, 0, 20,20);*/

                
    var imgData = context.getImageData(0, 0,W, H);
    var buffer32 = new Uint32Array(imgData.data.buffer);
   /* console.log(imgData); 
    var arys = [];
    var buffer32 = new Uint32Array(imgData.data.buffer);
      for(var i=0;i<buffer32.length;i++){
        if(buffer32[i]>0){
          arys.push(buffer32[i])
        }
      }
      console.log(arys);*/ 
    

// 配置参数
var message = document.getElementById('message'),
    gravity = document.getElementById('gra'),
    duration = document.getElementById('dur'),
    speed = document.getElementById('speed'),
    radius = document.getElementById('rad'),
    resolution = document.getElementById('res');

   graVal = parseFloat(gravity.value);
   durVal = parseFloat(duration.value);
   spdVal = parseFloat(speed.value);
   radVal = parseFloat(radius.value);
   resVal = parseFloat(resolution.value);      

// 颜色参数
colors = [
  '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
  '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
  '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
  '#FF5722'
  ];

var shaps="";
function change(){
      var txt = message.value;
      shaps = new Shape(20,200,txt);
     
}

function changeV() {
    console.log(graVal)
}


// 添加小球
/*var newballary = [];
for(var j=0; j < H; j += gridY){
     for(var i=0 ; i < W; i += gridX){
         if(buffer32[j * W + i]){
             var r = Math.random()*10;
             var col = utils.getRandomColor();
             var spend = parseFloat((Math.random()*0.01).toFixed(3)==0?0.01:(Math.random()*0.1).toFixed(2));
             var particle = new Ball(0.1, col);
             particle.x = i;
             particle.y = j;
             particle.spend = spend;
             newballary.push(particle);
             context.clearRect(0, 0, W, H);
         }
     }
 }*/


// console.log(newballary)
 // 心跳运动

 function heart(ball){
  if(ball.radius<0.1){
    ball.spend*=-1;
  }else if(ball.radius>1){
     ball.spend*=-1;
  }
  ball.radius +=ball.spend;
  
  ball.draw(context); 
 } 
 
  
  
(function drawFrame(){
    window.requestAnimationFrame(drawFrame, canvas);
    context.clearRect(0, 0, W, H);   
    if(shaps!=""){
        shaps.getValue();
        shaps.placement.forEach(heart);
    }
      
    
      
}())



